<template>  
  <div class="date-picker-container">  
    <span class="title">{{ title }}</span>  
    <el-date-picker  
      v-model="dates"  
      type="daterange"  
      placeholder="选择日期范围"  
      @change="handleChange"  
      class="date-picker"  
    />  
  </div>  
</template>  

<script setup>  
import { ref, defineProps, defineEmits } from 'vue';  

const props = defineProps({  
  modelValue: {  
    type: Array,  
    required: true,  
  },  
  title: {  
    type: String,  
    required: true,  
  },  
});  

const emit = defineEmits();  

const dates = ref(props.modelValue);  

const handleChange = (value) => {  
  dates.value = value;  
  emit('update:modelValue', value);  
};  
</script>  

<style scoped>  
.date-picker-container {  
 /* display: flex; /* 使用 flexbox 布局 */  
 /* align-items: center; /* 垂直居中对齐 */ 
 /* width: 220px;  */
}  

.title {  
  width: 70px; /* 设置标题宽度 */  
  margin-right: 10px; /* 与日期选择器之间的间距 */  
  text-align: right; /* 右对齐 */  
}  

.date-picker {  
  width: 220px; /* 设置日期选择器宽度 */  
}  
</style>